<template>
<!-- 可拖动弹框 -->
<div 
  class="draggable-dialog"
  ref="dialog"
  v-show="!firstShow"
  :style="{left: dialogLeft + 'px', top: dialogTop + 'px'}"
>
  <div class="dialog-header" @mousedown="startDrag">
    <span class="dialog-title">选择项目</span>
    <i class="el-icon-close close-btn" @click="handleClose"></i>
  </div>
  
  <div class="dialog-body">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-form :inline="true" :model="searchData" class="search-form">
        <el-form-item label="项目名称">
          <el-input 
            v-model="searchData.search" 
            placeholder="请输入项目名称" 
            clearable
            size="mini"
            @keyup.enter.native="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" size="mini">查询</el-button>
          <el-button @click="resetSearch" size="mini">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 表格区域 -->
    <div class="table-area">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-loading="loading"
        @row-click="handleRowClick"
        highlight-current-row
      >
        <el-table-column
          prop="RN"
          label="序号"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="PRJCODE"
          width="180"
          label="项目编码"
        ></el-table-column>
        <el-table-column
          prop="NAME"
          width="180"
          label="项目名称"
        ></el-table-column>
        <el-table-column
          prop="PNAME"
          width="180"
          label="项目简称"
        ></el-table-column>
        <el-table-column
          prop="分过程"
          label="分过程"
        ></el-table-column>
        <el-table-column
          prop="类别"
          label="类别"
        ></el-table-column>
        <el-table-column
          prop="项目占有人"
          width="100"
          label="项目占有人"
        ></el-table-column>
        <el-table-column
          prop="项目类型"
          label="项目类型"
        ></el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50, 100]"
          :page-size="searchData.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
  
  <div class="dialog-footer">
    <el-button size="mini" @click="handleClose">取消</el-button>
    <el-button size="mini" type="primary" @click="handleConfirm">确定</el-button>
  </div>
</div>
</template>

<script>
import { sessionStorage } from '@/deps/utils'
import { queryUserNetDesignPrjApi } from '@/deps/api'

export default {
  name: 'ProjectDialog',
  mounted() {
    // 加载数据
    this.fetchData()
  },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      currentPage: 1,
      currentRow: null,
      searchData: {
        search: '', // 项目名称
        offset: 0, // 页数偏移量
        limit: 5 // 每页条数
      },
      // 拖动相关变量
      dialogLeft: 0,
      dialogTop: 0,
      isDragging: false,
      startX: 0,
      startY: 0,
      // 顶部限制
      topOffset: 40,
      firstShow: true
    }
  },
  methods: {
    // 设置初始位置
    setInitialPosition() {
      // 使用默认尺寸计算居中位置
      const defaultWidth = 800
      const defaultHeight = 600
      this.dialogLeft = (window.innerWidth - defaultWidth) / 2
      this.dialogTop = Math.max(
        this.topOffset, // 确保不低于顶部限制
        (window.innerHeight - defaultHeight) / 2
      )

      // 数据加载完成后重新计算精确位置
      this.$nextTick(() => {
        if (this.$refs.dialog) {
          const dialogWidth = this.$refs.dialog.offsetWidth
          const dialogHeight = this.$refs.dialog.offsetHeight
          this.dialogLeft = (window.innerWidth - dialogWidth) / 2
          this.dialogTop = Math.max(
            this.topOffset, // 确保不低于顶部限制
            (window.innerHeight - dialogHeight) / 2
          )
        }
      })
    },
    // 获取数据
    fetchData() {
      this.loading = true
      const userData = sessionStorage('userData')
      const params = {
        userName: userData.userName,
        ...this.searchData
      }
      queryUserNetDesignPrjApi(params)
        .then(res => {
          this.tableData = res.rows
          this.total = res.total
          this.loading = false
          if (this.firstShow) {
            // 设置初始位置
            this.firstShow = false
            this.setInitialPosition()
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 查询
    handleSearch() {
      this.searchData.offset = 0 // 重置页码
      this.currentPage = 1
      this.fetchData()
    },
    // 重置
    resetSearch() {
      this.searchData = {
        search: '',
        offset: 0,
        limit: 10
      }
      this.currentPage = 1
      this.fetchData()
    },
    // 每页条数变化
    handleSizeChange(val) {
      this.searchData.limit = val
      this.fetchData()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.currentPage = val
      this.searchData.offset = (val - 1) * this.searchData.limit
      this.fetchData()
    },
    // 行点击事件
    handleRowClick(row) {
      this.currentRow = row
    },
    handleClose() {
      this.$emit('closePrjDialog')
    },
    // 确定选择
    handleConfirm() {
      if (!this.currentRow) {
        this.$message.warning('请选择一个项目')
        return
      }
      this.$emit('selectProject', this.currentRow)
    },

    // 开始拖动
    startDrag(e) {
      this.isDragging = true
      this.startX = e.clientX - this.dialogLeft
      this.startY = e.clientY - this.dialogTop

      document.addEventListener('mousemove', this.onDrag)
      document.addEventListener('mouseup', this.stopDrag)
    },

    // 拖动中
    onDrag(e) {
      if (!this.isDragging) return

      let newLeft = e.clientX - this.startX
      let newTop = e.clientY - this.startY

      // 限制不超出视口
      const dialogWidth = this.$refs.dialog.offsetWidth
      const dialogHeight = this.$refs.dialog.offsetHeight

      // 水平边界限制
      newLeft = Math.max(0, Math.min(window.innerWidth - dialogWidth, newLeft))
      // 垂直边界限制，顶部不小于topOffset
      newTop = Math.max(
        this.topOffset,
        Math.min(window.innerHeight - dialogHeight, newTop)
      )

      this.dialogLeft = newLeft
      this.dialogTop = newTop
    },
    // 停止拖动
    stopDrag() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.onDrag)
      document.removeEventListener('mouseup', this.stopDrag)
    }
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听
    document.removeEventListener('mousemove', this.onDrag)
    document.removeEventListener('mouseup', this.stopDrag)
  }
}
</script>

<style lang="scss">
// 公共变量
:root {
  // 基础颜色
  --color-primary: #2d8cf0;
  --color-primary-hover: #363e4f;
  --color-success: #67c23a;
  --color-warning: #e6a23c;
  --color-danger: #f56c6c;
  --color-info: #909399;
  
  // 白色主题
  --white-bg-color: #ffffff;
  --white-text-color: #303133;
  --white-border-color: #ebeef5;
  --white-hover-color: #f5f7fa;
  --white-input-bg: #ffffff;
  --white-input-text: #606266;
  --white-placeholder: #c0c4cc;
  
  // 黑色主题
  --black-bg-color: #1e2121;
  --black-text-color: #f5f7fa;
  --black-border-color: #2c2e2e;
  --black-hover-color: #0B0C0C;
  --black-input-bg: #252525;
  --black-input-text: #e0e0e0;
  --black-placeholder: #6d6d6d;
}

.draggable-dialog {
  position: fixed;
  width: 60%;  // 从70%调整为60%
  min-width: 700px;  // 从800px调整为700px
  max-height: calc(100vh - 100px);  // 从80px调整为100px
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 2000;
  display: flex;
  flex-direction: column;

  // 默认样式（白色主题）
  background: var(--white-bg-color);
  
  .dialog-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--white-border-color);
    background: var(--white-hover-color);
    color: var(--white-text-color);
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px 4px 0 0;
    user-select: none;
  }
  
  .dialog-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--white-text-color);
  }
  
  .close-btn {
    cursor: pointer;
    font-size: 16px;
    color: var(--color-info);
    transition: color 0.2s;
    
    &:hover {
      color: var(--color-primary);
    }
  }
  
  .dialog-body,
  .dialog-footer {
    border-color: var(--white-border-color);
    background: var(--white-bg-color);
    color: var(--white-text-color);
  }
  
  // 行点击效果
  .el-table .current-row {
    cursor: pointer;
    td.el-table__cell {
      background-color: var(--white-hover-color);
    }
  }
}

// 黑色主题
body.theme-black {
  .draggable-dialog {
    background: var(--black-bg-color);
    
    .dialog-header {
      border-bottom: 1px solid var(--black-border-color);
      background: var(--black-hover-color);
      color: var(--black-text-color);
    }
  
    .dialog-title {
      color: var(--black-text-color);
    }
  
    .close-btn {
      color: var(--black-placeholder);
      
      &:hover {
        color: var(--color-primary);
      }
    }
  
    .dialog-body,
    .dialog-footer {
      border-color: var(--black-border-color);
      background: var(--black-bg-color);
      color: var(--black-text-color);
    }
  
    // 行点击效果
    .el-table .current-row {
      background-color: var(--black-hover-color);
      td.el-table__cell {
        background-color: var(--black-hover-color) !important;
      }
    }
    
    // Element UI 组件样式
    .el-input {
      .el-input__inner {
        background-color: var(--black-input-bg);
        color: var(--black-input-text);
        border-color: var(--black-border-color);
        
        &::placeholder {
          color: var(--black-placeholder);
        }
      }
    }
    
    .el-button {
      &:not(.el-button--primary) {
        background-color: var(--black-hover-color);
        color: var(--black-text-color);
        border-color: var(--black-border-color);
        
        &:hover {
          background-color: var(--black-bg-color);
          border-color: var(--color-primary);
          color: var(--color-primary);
        }
      }
    }
    
    .el-table {
      background-color: var(--black-bg-color);
      color: var(--black-text-color);
      
      th, td {
        background-color: var(--black-bg-color);
        border-color: var(--black-border-color);
      }
      
      th {
        background-color: var(--black-hover-color);
      }
      
      tr:hover td {
        background-color: var(--black-hover-color);
      }
    }
    
    .el-pagination {
      color: var(--black-text-color);
      
      .btn-prev, .btn-next, .number {
        background-color: var(--black-bg-color);
        color: var(--black-text-color);
        
        &:hover {
          color: var(--color-primary);
        }
      }
      
      .active {
        background-color: var(--color-primary);
        color: var(--black-text-color);
      }
    }
  }
}

// 白色主题
body.theme-white {
  .draggable-dialog {
    // Element UI 组件默认样式
    .el-input {
      .el-input__inner {
        background-color: var(--white-input-bg);
        color: var(--white-input-text);
        border-color: var(--white-border-color);
        
        &::placeholder {
          color: var(--white-placeholder);
        }
      }
    }
    
    .el-button {
      &:not(.el-button--primary) {
        background-color: var(--white-bg-color);
        color: var(--white-text-color);
        border-color: var(--white-border-color);
        
        &:hover {
          background-color: var(--white-hover-color);
          border-color: var(--color-primary);
          color: var(--color-primary);
        }
      }
    }
    
    .el-table {
      background-color: var(--white-bg-color);
      color: var(--white-text-color);
      
      th, td {
        background-color: var(--white-bg-color);
        border-color: var(--white-border-color);
      }
      
      th {
        background-color: var(--white-hover-color);
      }
      
      tr:hover td {
        background-color: var(--white-hover-color);
      }
    }
    
    .el-pagination {
      color: var(--white-text-color);
      
      .btn-prev, .btn-next, .number {
        background-color: var(--white-bg-color);
        color: var(--white-text-color);
        
        &:hover {
          color: var(--color-primary);
        }
      }
      
      .active {
        background-color: var(--color-primary);
        color: var(--white-text-color);
      }
    }
  }
}

// 通用结构样式
.dialog-body {
  padding: 20px;
  flex: 1;
  overflow: auto;
}

.search-area {
  margin-bottom: 20px;
  
  .search-form {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    .el-form-item {
      margin-bottom: 0;
    }
  }
}

.pagination {
  margin-top: 0;
  text-align: right;
}

.dialog-footer {
  padding: 15px 20px;
  text-align: right;
}

// 调整表格间距
.el-table {
// 紧凑型表格样式
.el-table__header-wrapper,
.el-table__body-wrapper {
th, td {
padding: 8px 0;  // 调整上下间距
}
}

// 调整表头高度
.el-table__header {
th {
padding: 4px 0;  // 表头更紧凑
}
}
}

// 调整搜索区域间距
.search-area {
margin-bottom: 10px;  // 从20px调整为10px

.search-form {
margin-bottom: 0;
}
}

// 调整表格区域间距
.table-area {
margin-bottom: 0;  // 从20px调整为10px
}

// 调整分页间距
.pagination {
margin-top: 8px;  // 从15px调整为8px
}

// 调整弹窗内边距
.dialog-body {
padding: 12px 16px;  // 从20px调整为12px 16px
}

.dialog-footer {
padding: 0 16px 16px;  // 从15px 20px调整为10px 16px
}
</style>